<template>
  <div id="building">
    <div class="welcome">
      <h1>So glad you're here!</h1>
    </div>
    <div class="in">
      <span class="e"
        ><router-link to="/uregister"
          ><strong>用户注册 |</strong></router-link
        ></span
      >
      <span class="p"
        ><router-link to="/wregister"
          ><strong>跑腿员注册</strong></router-link
        ></span
      >
      <el-form :model="form" :rules="rules" ref="form" label-width="120px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" placeholder="请输入您的用户名" />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" placeholder="请输入您的性名" />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="form.sex" placeholder="请选择您的性别">
            <el-option label="男" value="男" />
            <el-option label="女" value="女" />
          </el-select>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="form.password"
            type="password"
            placeholder="请输入您的密码"
            show-password
          />
        </el-form-item>
        <el-form-item label="身份证" prop="idcard">
          <el-input v-model="form.idcard" 
          maxlength="18"
          onkeyup="this.value=this.value.replace(/[^\X0-9]/g, '')"
          placeholder="请输入您的身份证号" />
        </el-form-item>
        <el-form-item label="手机号" prop="phonenum" >
          <el-input
            v-model="form.phonenum"
            @input="form.phonenum = form.phonenum.replace(/^(0+)|[^\d]+/g, '')"
            maxlength="11"
            placeholder="请输入您的手机号码"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="submit" @click="wregister">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
        phonenum: "",
        sex: "",
        name: "",
        idcard: "",
      },
      isnull: false,
      rules: {
        phonenum: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { pattern:/^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: "请输入合法手机号/电话号", trigger: "blur" }
        ],
        username:[
          { required: true, message:"请输入用户名", trigger: "blur"},
          { min:5,max:12,message:"长度在 5 到 12个字符",trigger: "blur"}
        ],
        password:[
          { required: true, message:"请输入密码", trigger: "blur"},
          { min:6,message:"密码长度大于 6 个字符",trigger: "blur"}
        ],
        name:[
          { required: true, message:"请输入名字", trigger: "blur"},
        ],
        sex:[
           { required: true, message:"不提供无性别选项", trigger: "blur"},
        ],
        idcard: [
         { required: true, message: "请输入身份证号", trigger: "blur" },
          { pattern:/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/, message: "请输入合法身份证号", trigger: "blur"}
        ],
      }
    };
  },

  methods: {
    wregister() {
      if (this.form.username == "") {
        this.$msg.error("用户名不能为空");
      } else if (this.form.password == "") {
        this.$msg.error("密码不能为空");
      } else {
        this.$refs['form'].validate((valid)=>{
          if(valid){
        axios.post("workers/register", {
            /* params: { */
            name: this.form.name,
            password: this.form.password,
            phonenum: this.form.phonenum,
            sex: this.form.sex,
            username: this.form.username,
            idcard: this.form.idcard,
            /*  } */
          })
          .then((res) => {
            // console.log(res.data.data);
            if (res.data.code == 1) {
              this.$alert("是否返回登录页面", "注册成功", {
                confirmButtonText: "确定",
                callback: (action) => {
                  this.$router.push("/workerlogin");
                },
              });
            } else if(res.data.code == -1) {
            this.$alert('用户名已存在', '注册失败', {
              confirmButtonText: '确定',
              callback: action => {
                this.form.username = '',
                this.form.password = ''
              }
            })
          }  else {
              console.log(res.data);
              console.log(this.form);
            }
          })
          .catch((err) => {
            console.log("操作失败" + err);
          });
          }
        })

      }
    },
  },
};
</script>

<style lang="scss" scoped>
#building {
  background: url("../assets/img/w2.webp");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
  //background-size:contain;
}
.in {
  border: 1px solid #dccfcf;
  width: 350px;
  margin: 115px auto;
  padding: 35px 80px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #909399;
  background-color: rgba(255, 255, 255, 0.7);
  .e {
    font-size: 28px;
    padding-left: 20%;
  }
  .p {
    font-size: 28px;
    padding-left: 6px;
  }
}
.welcome {
  text-align: center;
}
</style>